<template>
    <div class="login" :style="{width:width+'px',height: height+'px'}">
      <div class="login-div" align="center">
        <h4>登录</h4>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
        >
          <el-form-item label="" prop="userAccount" style="margin-top: 10px">
            <el-row>

              <el-col :span="21">
                <el-input
                  class="el-input"
                  placeholder="账号"
                  v-model="loginForm.userAccount">
                </el-input>
              </el-col>
              <el-col :span="3" class="icon">
                &nbsp;<span  class="el-icon-s-custom"></span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="userPassWord">
            <el-row>
              <el-col :span="21">
                <el-input
                  class="el-input"
                  type="password"
                  placeholder="密码"
                  v-model="loginForm.userPassWord"></el-input>
              </el-col>
              <el-col :span="3" class="icon">
                &nbsp;<span  class="el-icon-lock"></span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item style="margin-top: 55px">
            <el-button type="primary" round class="submit-button"
                       @click="onSubmit('loginForm')">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  import {getClientSize} from '../../util/util';
  import {checkAccountByPost,chackPasswordByPost, loginByPost, chackAccountByGet} from '../../config/index';
  export default {
    computed:{
      width(){
        return getClientSize().width;
      },
      height(){
        return getClientSize().height;
      },
    },
    data  () {
      var checkAccount = (rule, value, callback) => {
          if (value == "") {
            // 账号未做任何输入
            setTimeout(() => {
              callback(new Error('请输入账号'));
            }, 200);

          } else {
            // 发起账号检查
            var res = checkAccountByPost({
              "userAccount": this.loginForm.userAccount
            });
            res.then((res)=>{
               if(res.status == 200){
                 // 请求成功: 有这个账号
                 this.loginStatus.accountStatus = true;
                 callback();
               }else{
                 this.loginStatus.accountStatus = false;
                 callback(new Error('账号不存在'));
               }
              })
              .catch((e)=>{
                console.log("checkAccountByPost: 失败",e);
                callback(new Error('请求异常'));
              })
          }
      };
      var validatePass = (rule, value, callback) => {
        // 先验证账号是否输入正确
        if (!this.loginStatus.accountStatus){
          // 账号有问题, 等待账号输入正确
          return
        }


        if (value == "") {
          // 密码框未做任何输入
          setTimeout(() => {
            callback(new Error('请输入密码'));
          }, 100);
        } else {
          // 密码框已经输入

          // 发起根据账号检查密码请求
          var res = chackPasswordByPost({
            "userAccount": this.loginForm.userAccount,
            "userPassWord": this.loginForm.userPassWord
          });
          res.then((res)=>{
            if(res.status == 200){
              // 请求成功:  账号对应的密码框输入正确
              this.loginStatus.passwordStatus = true
              callback();
            }else{
              this.loginStatus.passwordStatus = false;
              callback(new Error('密码错误'));
            }
          }).catch((e)=>{
              console.log("chackPasswordByPost: 失败",e);
              callback(new Error('请求异常'));
            })
        }
      };
      return {
        loginForm: {
          userAccount: "",
          userPassWord: "",
        },
        loginRules: {
          userAccount: [ { validator: checkAccount, trigger: "blur" } ],
          userPassWord: [ { validator: validatePass, trigger: "blur" } ],
        },
        loginStatus: {
          accountStatus: false,
          passwordStatus: false
        }
      }
    },
    methods: {
      onSubmit(formName){
        // 重置数据为初始状态
        // this.$refs[formName].resetFields();
        // return
        if (!this.loginStatus.passwordStatus || !this.loginStatus.accountStatus) {
          // 账号和密码有一个有问题
          return
        }

        // 发起登录请求
        var res = loginByPost({
          "userAccount": this.loginForm.userAccount,
          "userPassWord": this.loginForm.userPassWord
        });
        res.then((res)=>{
          console.log(res)
          if(res.status == 200){
            // 请求成功:  账号对应的密码框输入正确
            this.$store.dispatch('loginStatus', true);
            this.$store.dispatch('setUserId', res.data.userId);
            this.$store.dispatch('setUserMsg', res.data);
            // 路由跳转
            this.$router.push('/home');
          }else{
             alert("登录失败")
          }
        }).catch((e)=>{
          console.log("loginByPost: 失败",e);
          alert("登录失败")
        })
      }
    }
  }
</script>

<style scoped>
.login{
  text-align: center;
  background-color: #bbbbbb;
  color: white;
  font-size: 16px;
  position: relative;
  background-position: left top;
}
.login-div {
  width: 260px;
  height: 280px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 30px 40px 30px;
  box-shadow: -15px 15px 15px rgba(139, 139, 144, 0.7);
  opacity: 1;
  background: linear-gradient(
    230deg,
    rgba(53, 57, 74, 0) 0%,
    rgb(156, 156, 156) 100%
  );
}
.el-input input {
  border: none;
  color: #fff;
  background-color: transparent;
  font-size: 12px;
}
.submit-button {
  background-color: transparent;
  color:  white;
  width: 200px;
}
.icon{
  font-size: 22px;
}
/deep/ .el-button--primary{
  border-color: white;
}
/deep/ .el-form-item__error{
  color:white;
}
/deep/ .el-input__inner{
  border-color: white !important;
}

</style>
